import { Button } from 'antd'
import styles from './index.less'
const ButtonGroup = props => {
  const renderBtnIcon = () => {
    switch(props.group){
      case 'import':
        return <img src='../../../newUI/upload.png' style={{width:16,marginRight:8}} />
      case 'download':
        return <img src='../../../newUI/download.png' style={{width:16,marginRight:8}} />
      case 'add':
        return <img src='../../../newUI/btn-add.png' style={{width:16,marginRight:8}} />
      case 'sort':
        return <img src='../../../newUI/btn-sort.png' style={{width:16,marginRight:8}} />
      default:''
    }
  }

  const renderColor = () => {
    switch(props.group){
      case 'start-table':
        return '#14C6A1'
      case 'stop-table':
        return '#F59A23'
      case 'delete-table':
        return '#FF4D4F'
      default:""
    }
  }

  const handleClick = (e) => {
    if(props.handleClick){
      props.handleClick(e)
    }
  }
  return (
    props.group && props.group.indexOf('table') != -1 ? (
      <Button
        type='link'
        size='small'
        style={{marginRight:5,color:renderColor(),...props.style}}
        {...props.attributeList} 
        onClick={handleClick}
      >
        {props.title}
      </Button>
    ) : (
      <Button 
        className={styles.buttonGroup} 
        type={props.group == 'add' ? 'primary' : ''} 
        {...props.attributeList} 
        onClick={handleClick}
        style={{marginRight:8,...props.style}}
      >
        {renderBtnIcon()}
        {props.title}
      </Button>
    )
    
  )
}

export default ButtonGroup